<!DOCTYPE html>
<html>
<head>
<title>Paralax</title>
<script src="giraffe-0.0.2.js"></script>
<script>
var canvas;
function init() {
	canvas = new Canvas("canvas");
  	Giraffe.Interactive.setInteractive(canvas);
  	Giraffe.setAnimated(canvas);
	canvas.startAnimation(15,100,true);
	
	drawLayers();
}

function drawLayers() {

	background = new Picture(0,0,"background2.png");
	
	middleground = new Composite(0,0);
	middleground.add(new Picture(0,0,"middleground.png"));
	middleground.add(new Picture(800,0,"middleground.png"));
	
	foreground = new Composite(0,0);
	foreground.add(new Picture(0,0,"foreground.png"));
	foreground.add(new Picture(800,0,"foreground.png"));

	canvas.add(background);
	canvas.add(middleground);
	canvas.add(foreground);
	
	foreground.sequence=new Giraffe.MoveSequence(foreground,200,[-2,0]);
	foreground.sequence.doNext = function() {
		foreground.sequence.start();
	}
	foreground.sequence.start();
	
	middleground.sequence=new Giraffe.MoveSequence(middleground,200,[-1,0]);
	middleground.sequence.doNext = function() {
		middleground.sequence.start();
	}
	middleground.sequence.start();
}

</script>

</head>
<body onload="init();">
<canvas id="canvas" width="800" height="500" style="border: solid 1px;"></canvas>
</body>
</html>